const { connect } = dva;
const { Icon, Button, Table } = antd;
const { Plink, RemoteSelect } = require('../../Widgets.jsx');
import { namespace } from '../../../models/sys/Permission.jsx'
import { namespace as resourcesNamespace } from '../../../models/sys/Resources.jsx'

export const moduleName = { title: '模块', dataIndex: 'module.name', width: '30%' };
export const resourceName = { title: '资源名称', dataIndex: 'name' };
export const resourceUrl = { title: '资源地址', dataIndex: 'url', width: '40%' };
export const action = { title: '操作', key: 'Action', width: 80 };

function handleSubmit(dispatch, { key, version }, dataSource) {
    const permission = { key, version };
    permission.resources = [];
    dataSource.forEach(value => {
        permission.resources.push({ key: value.key })
    });
    dispatch({ type: `${namespace}/save`, payload: { values: permission, url: 'updateResources' } })
}

function SelectResources (props) {
    const { edit: { dataSource, record }, loading, dispatch } = props;
    return (
        <div>
            <div className='search-toolbar'>
                <Icon type='check' /><span style={{ paddingLeft: 2 }}>{`(${record ? record.label : ''})已选择的资源`}</span>
                <Button type='primary' disabled={loading} style={{ marginLeft: 8 }} onClick={handleSubmit.bind(this, dispatch, record, dataSource)}>提交</Button>
            </div>
            <Table
                dataSource={dataSource}
                pagination={false}
                loading={loading}
                bordered
                columns={ [
                    moduleName,
                    resourceName,
                    resourceUrl, {
                    ...action,
                    render: (text, record, index) => (
                        <Plink onClick={ () => dispatch({ type: `${namespace}/delResource`, payload: { index } }) }>删除</Plink>
                    )
                } ] }
            />
        </div>
    )
}

const SelectResourcesConnect = connect(state => {
    return { ...state[namespace], loading: state.loading.models[namespace] }
})(SelectResources);

function Resources (props) {
    const { dataSource, pagination, loading, dispatch } = props;
    return (
        <div className='search-result-list'>
            <div className='search-toolbar'>
                <Icon type='bars'/><span style={{ paddingLeft: 2 }}>资源列表</span>
            </div>
            <Table
                dataSource={dataSource}
                pagination={pagination}
                loading={loading}
                onChange={( pagination ) => { dispatch({ type: `${resourcesNamespace}/paginationLoad`, payload: { pagination }}) }}
                bordered
                columns={ [ {
                    ...moduleName,
                    filterDropdown: (<div className='custom-filter-dropdown'>
                        <RemoteSelect
                            url='sys/module/allQuery'
                            onChange={ (value) =>
                                dispatch({
                                    type: `${resourcesNamespace}/fetch`,
                                    payload: { pagination: { current: 1 }, searchData: { module: { key: value } } }
                                })
                            }
                        />
                    </div>)
                }, resourceName, resourceUrl, {
                    ...action,
                    render: (text, record) => (
                        <Plink onClick={ () => dispatch({ type: `${namespace}/addResource`, payload: { record } }) }>添加</Plink>
                    )
                } ] }
            />
        </div>
    )
}

const ResourcesConnect = connect(state => {
    return { ...state[resourcesNamespace], loading: state.loading.models[resourcesNamespace] }
})(Resources);

export default function () {
    return (
        <div style={{padding: '30px 20px 20px 20px'}}>
            <SelectResourcesConnect/>
            <ResourcesConnect/>
        </div>
    )
};
